<template>
  <div class="page-container">
    <div class="container">
      <div class="banner">
        <div class="wrapper">
          <div class="place-search-panel">
            <div class="searchbar clearfix">
              <input id="ipt_keyword" class="search-input" type="text" placeholder="输入要办理签证的国家或地区名称" />
              <a id="btn_keyword" class="search-button" href="javascript:void(0);" role="button"><i class="icon-search"></i></a>
            </div>
            <div class="place-search-hot">
              <a href="javascript:void(0);" target="_blank">美国</a>
              <a href="javascript:void(0);" target="_blank">台湾</a>
              <a href="javascript:void(0);" target="_blank">日本</a>
              <a href="javascript:void(0);" target="_blank">英国</a>
              <a href="javascript:void(0);" target="_blank">泰国</a>
              <a href="javascript:void(0);" target="_blank">新加坡</a>
              <a href="javascript:void(0);" target="_blank">马来西亚</a>
              <a href="javascript:void(0);" target="_blank">更多&gt;</a>
            </div>
          </div>
        </div>
      </div>
      <div class="content wrapper">
        <div class="hot_visa">
          <div class="title">
            <h3 class="flt1">带TA游推荐</h3>
          </div>
          <ul class="pro-m clearfix">
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s10/M00/35/A0/wKgBZ1iVOtiAfZcTAAIqYtFcsoM37.jpeg?imageMogr2%2Fthumbnail%2F%21628x360r%2Fgravity%2FCenter%2Fcrop%2F%21628x360%2Fquality%2F100" width="314" height="180" />
                  <div class="cover">
                    <div class="city">
                      <span>日本</span><br />
                      <i class="line"></i>
                      <strong>上海送签</strong>
                    </div>
                  </div>
                </div>
                <div class="info">
                  <div class="visa_tips clearfix">
                    <span class="nation">日本</span>
                    <span class="price"><em>¥228</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s11/M00/A5/5B/wKgBEFtqvyCAYJLrAACWGmw4eXc39.jpeg?imageMogr2%2Fthumbnail%2F%21628x360r%2Fgravity%2FCenter%2Fcrop%2F%21628x360%2Fquality%2F100" width="314" height="180" />
                  <div class="cover">
                    <div class="city">
                      <span>澳大利亚</span><br />
                      <i class="line"></i>
                      <strong>全国受理</strong>
                    </div>
                  </div>
                </div>
                <div class="info">
                  <div class="visa_tips clearfix">
                    <span class="nation">澳大利亚</span>
                    <span class="price"><em>¥879</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="nomargin">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s15/M00/ED/FB/CoUBGV3beVCAXmleAB_ZJOkYtBw17.jpeg?imageMogr2%2Fthumbnail%2F%21628x360r%2Fgravity%2FCenter%2Fcrop%2F%21628x360%2Fquality%2F100" width="314" height="180" />
                  <div class="cover">
                    <div class="city">
                      <span>新加坡</span><br />
                      <i class="line"></i>
                      <strong>全国受理</strong>
                    </div>
                  </div>
                </div>
                <div class="info">
                  <div class="visa_tips clearfix">
                    <span class="nation">新加坡</span>
                    <span class="price"><em>¥228</em>起</span>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="hot_visa">
          <div class="title">
            <h3 class="flt1">热门国家/地区</h3>
            <span class="flt2">
              <a href="javascript:void(0);" target="_blank">查看更多</a>
            </span>
          </div>
          <ul class="pro-s clearfix">
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s14/M00/6F/E3/wKgE2l0JqQKAQh-bAAAUy4YuwME159.png?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">日本</p>
                  <p class="pice"><em>¥39</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/8E/07/wKgBs1baom-AP4RdAADHMulz0Qg19.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">泰国</p>
                  <p class="pice"><em>¥219</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s10/M00/28/20/wKgBZ1h9lfqAIy5gAACeSj2ZR6s35.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">马来西亚</p>
                  <p class="pice"><em>¥0</em>起</p>
                </div>
              </a>
            </li>
            <li class="nomargin">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/87/44/wKgBs1gRazqADtgAAAA-0uosra025.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">新加坡</p>
                  <p class="pice"><em>¥239</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s8/M00/4E/6D/wKgBpVhrdMOAehR-AAAPsYjs89s60.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">越南</p>
                  <p class="pice"><em>¥0</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="/sales/0-0-M10062-4-0-0-0-0.html" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/43/25/wKgBs1aOI_uAX_ULAABSn9Xk10I15.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">美国</p>
                  <p class="pice"><em>¥28</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="/sales/0-0-M10067-4-0-0-0-0.html" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/CB/11/wKgBs1gRzi2AST0PAAAaX73pSTI03.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">菲律宾</p>
                  <p class="pice"><em>¥300</em>起</p>
                </div>
              </a>
            </li>
            <li class="nomargin">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s14/M00/6F/ED/wKgE2l0JqQaAAVt1AAA4RJU2TgU005.png?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">澳大利亚</p>
                  <p class="pice"><em>¥0</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/85/31/wKgBs1gRaEiAAUVFAAAwmhS89jg571.gif?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">新西兰</p>
                  <p class="pice"><em>¥468</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/85/AE/wKgBs1gRaO2AC7S3AACZ_a9gssQ28.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">英国</p>
                  <p class="pice"><em>¥956</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/CB/04/wKgBs1gRzgiAUDe6AAAQpaF0o1822.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">法国</p>
                  <p class="pice"><em>¥149</em>起</p>
                </div>
              </a>
            </li>
            <li class="nomargin">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/CB/05/wKgBs1gRzg6ACIVWAAAQOwmGS6Q24.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">意大利</p>
                  <p class="pice"><em>¥139</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/CB/0D/wKgBs1gRziGAFiO-AAA5SMAc_HI06.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">俄罗斯</p>
                  <p class="pice"><em>¥0</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s10/M00/7F/5F/wKgBZ1mybkaAZJ4gAAAsmm7e4eU57.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">土耳其</p>
                  <p class="pice"><em>¥433</em>起</p>
                </div>
              </a>
            </li>
            <li>
              <a href="/sales/0-0-M10177-4-0-0-0-0.html" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s9/M00/CA/FF/wKgBs1gRzf2AHZYtAAAW7xQDREY26.jpeg?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">加拿大</p>
                  <p class="pice"><em>¥1398</em>起</p>
                </div>
              </a>
            </li>
            <li class="nomargin">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://p1-q.mafengwo.net/s15/M00/FD/FE/CoUBGV2_9jGAHG8AAAE6Mp2Bs3k336.png?imageMogr2%2Fthumbnail%2F%21200x134r%2Fgravity%2FCenter%2Fcrop%2F%21200x134%2Fquality%2F100" width="100" height="67" />
                </div>
                <div class="info">
                  <p class="nation">西班牙</p>
                  <p class="pice"><em>¥199</em>起</p>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="recommed" data-change="mod">
          <div class="title">
            <h3 class="flt1">本周热卖</h3>
            <span class="flt2">
              <a href="javascript:void(0);" data-change="btn"><i class="change"></i>换一组</a>
            </span>
          </div>
          <ul class="clearfix" data-change-step="3">
            <li data-change="list">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://sales.mafengwo.net/mfs/s12/M00/D8/F0/wKgED1wGTxqAacyiAABiTfW9GmE748.gif?imageMogr2%2Fthumbnail%2F%21470x264r%2Fgravity%2FCenter%2Fcrop%2F%21470x264%2Fquality%2F100" width="235" height="132" />
                  <p class="text"><i class="address"></i>日本</p>
                </div>
                <div class="info">
                  <h2>北京送签-日本单次旅游签证(拒签全退+顺丰包回邮+简化资料+客服秒回+日本签证+东京大阪自由行+北海道滑雪泡温泉)</h2>
                  <div class="price clearfix">
                    <span class="money"><em>¥278</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li data-change="list">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://sales.mafengwo.net/mfs/s11/M00/13/D4/wKgBEFuGb22AetXdABArYuD-ATc399.gif?imageMogr2%2Fthumbnail%2F%21470x264r%2Fgravity%2FCenter%2Fcrop%2F%21470x264%2Fquality%2F100" width="235" height="132" />
                  <p class="text"><i class="address"></i>菲律宾</p>
                </div>
                <div class="info">
                  <h2>上海送签-菲律宾旅游签证(优先排队最快1工出签+免资产免在职+全国受理+拒签全退+免面试+免机酒+长滩薄荷岛宿务菲律宾签证)</h2>
                  <div class="price clearfix">
                    <span class="money"><em>¥300</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li data-change="list">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://sales.mafengwo.net/mfs/s15/M00/BD/E7/CoUBGV2mvSyAdjhNABQyLOxOaOo244.gif?imageMogr2%2Fthumbnail%2F%21470x264r%2Fgravity%2FCenter%2Fcrop%2F%21470x264%2Fquality%2F100" width="235" height="132" />
                  <p class="text"><i class="address"></i>泰国</p>
                </div>
                <div class="info">
                  <h2>全国办理-泰国电子落地签(春节出游专享+EVOA快速通关+免排队+电子材料+泰国普吉清迈曼谷自由行签证)</h2>
                  <div class="price clearfix">
                    <span class="money"><em>¥136</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li data-change="list">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://sales.mafengwo.net/mfs/s12/M00/99/EF/wKgED1wjQiKASxvOAAb31bko-ck809.gif?imageMogr2%2Fthumbnail%2F%21470x264r%2Fgravity%2FCenter%2Fcrop%2F%21470x264%2Fquality%2F100" width="235" height="132" />
                  <p class="text"><i class="address"></i>日本</p>
                </div>
                <div class="info">
                  <h2>广州送签-日本单次旅游签证(樱花提前go/上千好评+销量万本无拒签+免流水在职可加急福建简化东京大阪北海道自由行日本签证)</h2>
                  <div class="price clearfix">
                    <span class="money"><em>¥266</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="hide" data-change="list">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://sales.mafengwo.net/mfs/s13/M00/3B/72/wKgEaVytrVuAXEfWABUpDjWdxGY72.jpeg?imageMogr2%2Fthumbnail%2F%21470x264r%2Fgravity%2FCenter%2Fcrop%2F%21470x264%2Fquality%2F100" width="235" height="132" />
                  <p class="text"><i class="address"></i>美国</p>
                </div>
                <div class="info">
                  <h2>北京送签-美国旅游签证(全国受理+超快约签+专业美签面试讲解+可升级拒签全赔+部分套餐含EVUS登记)</h2>
                  <div class="price clearfix">
                    <span class="money"><em>¥6</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="hide" data-change="list">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://sales.mafengwo.net/mfs/s14/M00/55/57/wKgE2l1BUYCAIxM4AATV-UVuack31.jpeg?imageMogr2%2Fthumbnail%2F%21470x264r%2Fgravity%2FCenter%2Fcrop%2F%21470x264%2Fquality%2F100" width="235" height="132" />
                  <p class="text"><i class="address"></i>澳大利亚</p>
                </div>
                <div class="info">
                  <h2>全国办理-澳大利亚一年多次旅游签证(咨询立减+官方绿色通道+可加急办理+专业客服多对1指导+一价全包+高出签率+全国送签)</h2>
                  <div class="price clearfix">
                    <span class="money"><em>¥744</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="hide" data-change="list">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="https://sales.mafengwo.net/mfs/s12/M00/2C/1E/wKgED1uI8DKAS9l_AAlReE0Jhvw897.gif?imageMogr2%2Fthumbnail%2F%21470x264r%2Fgravity%2FCenter%2Fcrop%2F%21470x264%2Fquality%2F100" width="235" height="132" />
                  <p class="text"><i class="address"></i>日本</p>
                </div>
                <div class="info">
                  <h2>上海送签-日本单次旅游签证(拒签全退+上海户籍立减60元+年终蜂抢199元起+简化办理+仅需基本材料+日本自由行签证)</h2>
                  <div class="price clearfix">
                    <span class="money"><em>¥218</em>起</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="hide" data-change="list">
              <a href="javascript:void(0);" target="_blank">
                <div class="pic">
                  <img src="" width="235" height="132" />
                  <p class="text"><i class="address"></i></p>
                </div>
                <div class="info">
                  <h2></h2>
                  <div class="price clearfix">
                    <span class="money"><em>¥</em></span>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="flow_visa">
          <div class="title">
            <h3 class="">办理流程</h3>
          </div>
          <ul class="clearfix">
            <li>
              <span class="icon1"></span>
              <p><i>1.</i>选择签证</p>
            </li>
            <li>
              <span class="icon2"></span>
              <p><i>2.</i>确认订单</p>
            </li>
            <li>
              <span class="icon3"></span>
              <p><i>3.</i>支付费用</p>
            </li>
            <li>
              <span class="icon4"></span>
              <p><i>4.</i>坐等商家邮件</p>
            </li>
            <li>
              <span class="icon5"></span>
              <p><i>5.</i>递交材料</p>
            </li>
            <li>
              <span class="icon6"></span>
              <p><i>6.</i>出签领取</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.page-container {
  .hide {
    display: none;
  }
  .wrapper {
    width: 1000px;
    margin: 0 auto;
  }
  .container {
    .banner {
      width: 100%;
      height: 240px;
      background: url(../../assets/images/focus1.jpg) no-repeat center top #a9c0e0;
      .wrapper {
        position: relative;
        height: 240px;
        width: 1000px;
        margin: 0 auto;
        .place-search-panel {
          position: absolute;
          z-index: 2;
          left: 50%;
          top: 50%;
          margin: -70px 0 0 -280px;
          width: 540px;
          padding: 15px 10px;
          background-color: #000;
          background-color: rgba(0, 0, 0, 0.4);
          border-radius: 4px;
          filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#28000000,endcolorstr=#28000000);
          .searchbar {
            height: 46px;
          }
          .search-input {
            float: left;
            width: 440px;
            height: 46px;
            margin: 0 6px 0 0;
            padding: 0 20px;
            background-color: #fff;
            border: 0 none;
            line-height: 46px;
            font-size: 14px;
            color: #000;
            border-radius: 4px;
          }
          .search-button {
            float: left;
            width: 50px;
            height: 46px;
            background-color: #192885;
            border-radius: 4px;
            text-align: center;
            .icon-search {
              display: inline-block;
              margin-top: 11px;
              width: 24px;
              height: 24px;
              background: url(../../assets/images/header-sprites.png) no-repeat 0 -110px;
              overflow: hidden;
              vertical-align: top;
            }
          }
        }
        .place-search-hot {
          margin-top: 8px;
          line-height: 16px;
          a {
            margin-right: 10px;
            color: #fff;
            &:hover {
              outline: 0;
              text-decoration: underline;
            }
          }
        }
      }
    }

    .content {
      .hot_visa {
        padding-top: 17px;
        .pro-m {
          padding-top: 15px;
          .nomargin {
            margin-right: 0;
          }
          li {
            width: 314px;
            float: left;
            margin-right: 29px;
            a {
              color: #000;
              &:hover {
                .info .visa_tips {
                  background-color: #f9f9f9;
                }
              }
              .pic {
                width: 314px;
                height: 180px;
                overflow: hidden;
                position: relative;
                .cover {
                  width: 314px;
                  height: 150px;
                  background: rgba(0, 0, 0, 0.25);
                  position: absolute;
                  left: 0;
                  top: 0;
                  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000,endColorstr=#40000000);
                  text-align: center;
                  color: #fff;
                  font-size: 24px;
                  padding-top: 30px;
                  .city {
                    display: inline-block;
                  }
                  .city > span {
                    padding: 10px 20px;
                    display: inline-block;
                  }
                  .line {
                    width: 100%;
                    height: 3px;
                    background-color: #fff;
                    border-radius: 2px;
                    display: block;
                    position: relative;
                  }
                  .city > strong {
                    font-weight: normal;
                    display: inline-block;
                    padding: 10px;
                  }
                }
              }
              .info {
                border: 1px solid #f1f1f1;
                border-top: 0;
                color: #999;
                .visa_tips {
                  height: 44px;
                  padding: 0 9px;
                  background-color: #fff;
                  line-height: 44px;
                  font-size: 20px;
                  overflow: hidden;
                  .nation {
                    float: left;
                    color: #000;
                  }
                  .price {
                    float: right;
                    font-size: 14px;
                    em {
                      color: #192885;
                      font-size: 22px;
                      font-style: normal;
                    }
                  }
                }
              }
            }
          }
        }
        .pro-s {
          padding: 20px 0 27px;
          .nomargin {
            margin-right: 0;
          }
          li {
            height: 67px;
            float: left;
            background-color: #fff;
            border: 1px solid #fff;
            padding: 14px;
            overflow: hidden;
            margin: 0 20px 10px 0;
            &:hover {
              border-color: #f1f1f1;
              background-color: #f9f9f9;
            }
            .pic {
              width: 100px;
              height: 67px;
              overflow: hidden;
              float: left;
            }
            .info {
              width: 90px;
              float: left;
              padding-left: 15px;
              .nation {
                color: #000;
                font-size: 16px;
              }
              .pice {
                color: #959595;
                padding-top: 10px;
                em {
                  color: #192885;
                  font-size: 22px;
                  font-style: normal;
                }
              }
            }
          }
        }
      }

      .recommed {
        padding-bottom: 35px;
        ul {
          padding: 15px 0;
          li {
            width: 235px;
            float: left;
            margin-right: 15px;
            height: 229px;
            position: relative;
            &:hover {
              text-decoration: none;
              .info {
                height: 131px;
                background-color: #fff;
                h2 {
                  height: 80px;
                }
              }
            }
            .pic {
              width: 235px;
              height: 132px;
              overflow: hidden;
              position: relative;
              .text {
                width: 100%;
                height: 34px;
                line-height: 34px;
                color: #fff;
                font-size: 18px;
                position: absolute;
                left: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#55000000,endcolorstr=#55000000);
                i {
                  width: 16px;
                  height: 21px;
                  background: url(../../assets/images/address.png);
                  display: inline-block;
                  vertical-align: text-bottom;
                  margin: 0 5px 0 10px;
                }
              }
            }
            .info {
              border: 1px solid #f1f1f1;
              border-top: 0;
              padding: 0 8px 5px 8px;
              height: 91px;
              overflow: hidden;
              position: absolute;
              left: 0;
              bottom: 0;
              transition: height 0.2s ease-in-out 0.1s;
              background-color: #fff;
              h2 {
                font-size: 14px;
                color: #000;
                line-height: 22px;
                font-weight: normal;
                padding: 6px 0;
                height: 40px;
                overflow: hidden;
                transition: height 0.2s ease-in-out 0.1s;
              }
              .price {
                padding-top: 10px;
                .money {
                  float: right;
                  color: #959595;
                  em {
                    color: #192885;
                    font-size: 22px;
                    font-style: normal;
                  }
                }
              }
            }
          }
        }
      }

      .flow_visa {
        ul {
          padding: 25px 0;
          li {
            width: 165px;
            text-align: center;
            float: left;
            font-size: 14px;
            span {
              width: 37px;
              height: 37px;
              background: url(../../assets/images/icon_sprites.png) no-repeat 0 0;
              display: inline-block;
              &.icon2 {
                background-position: -40px 0;
                width: 39px;
              }
              &.icon3 {
                background-position: -80px 0;
                width: 39px;
              }
              &.icon4 {
                background-position: -120px 0;
                width: 39px;
              }
              &.icon5 {
                background-position: -160px 0;
                width: 39px;
              }
              &.icon6 {
                background-position: -200px 0;
                width: 39px;
              }
            }
            p {
              height: 46px;
              line-height: 46px;
            }
            i {
              font-size: 14px;
            }
          }
        }
      }

      .flt1 {
        float: left;
      }
      .flt2 {
        float: right;
      }
      .title {
        height: 52px;
        line-height: 52px;
        border-bottom: 1px solid #e8e8e8;
        overflow: hidden;
        h3 {
          font-size: 24px;
          font-weight: normal;
        }
        span {
          line-height: 74px;
        }
        a {
          color: #666;
          padding-right: 10px;
        }
        i {
          width: 14px;
          height: 14px;
          background: url(../../assets/images/change.png);
          display: inline-block;
          margin-right: 4px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
